<template>
	<view class="login-container">
		<view class="form-container">
			<view class="form-item">
				<!-- <text class="label">手机号码</text> -->
				<view class="input-wrapper">
					<input v-model="phone" type="number" placeholder="请输入手机号码" maxlength="11" @input="handlePhoneInput" />
					<text class="send-code" :class="{ disabled: !canSend }" @click="sendVerifyCode">
						{{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
					</text>
				</view>
			</view>

			<view class="form-item">
				<!-- <text class="label">验证码</text> -->
				<view class="input-wrapper">
					<input v-model="verifyCode" type="number" placeholder="请输入6位验证码" maxlength="6" />
				</view>
			</view>

			<button class="login-btn" :disabled="!canLogin" @click="handleLogin">立即绑定</button>
		</view>
		<agreementPopup :showAgreement="isShowAgreement" @update:visible="updateVisible" code="user_agreement" />
		<agreementPopup :showAgreement="isShowPrivacy" @update:visible="updateVisible" code="privacy_agreement" />
	</view>
</template>

<script>
import http from '@/utils/http';
import agreementPopup from '../common/carpooleAgreementPopup.vue';
import { initWebSocket } from '@/utils/ws';
export default {
	components: { agreementPopup },
	data() {
		return {
			checkName: 'auth-quan', // auth-gou
			phone: '', // 手机号
			verifyCode: '', // 验证码
			countdown: 0, // 倒计时
			timer: null, // 定时器
			agreed: false, // 是否同意协议
			canSend: false, // 是否可以发送验证码
			isShowAgreement: false,
			isShowPrivacy: false
		};
	},
	onLoad() {},
	computed: {
		// 是否可以登录
		canLogin() {
			return this.phone.length === 11 && this.verifyCode.length === 6;
		}
	},
	methods: {
		// 协议相关
		updateVisible() {
			this.isShowAgreement = false;
			this.isShowPrivacy = false;
		},
		confirmAgreement() {
			this.isShowAgreement = true;
		},
		confirmPrivacy() {
			this.isShowPrivacy = true;
		},
		handleCheck() {
			this.agreed = !this.agreed;
			this.checkName = this.agreed ? 'auth-gou' : 'auth-quan';
		},
		// 处理手机号输入
		handlePhoneInput(e) {
			this.phone = e.detail.value;
			this.canSend = this.phone.length === 11;
		},

		// 发送验证码
		sendVerifyCode() {
			if (!this.canSend || this.countdown > 0) return;

			// 验证手机号格式
			if (!/^1[3-9]\d{9}$/.test(this.phone)) {
				uni.showToast({
					title: '请输入正确的手机号码',
					icon: 'none'
				});
				return;
			}
			http.post('/h5/common/sendSmsCode', {
				phone: this.phone,
				scene: 'login'
			}).then((res) => {
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				});
				// 开始倒计时
				this.countdown = 60;
				this.timer = setInterval(() => {
					if (this.countdown <= 0) {
						clearInterval(this.timer);
						return;
					}
					this.countdown--;
				}, 1000);
			});
		},

		// 处理登录
		async handleLogin() {
			if (!this.canLogin) return;

			// 验证验证码格式
			if (!/^\d{6}$/.test(this.verifyCode)) {
				uni.showToast({
					title: '请输入6位数字验证码',
					icon: 'none'
				});
				return;
			}
			try {
				const res = await this.$http.post('/h5/auth/login', {
					phone: this.phone,
					code: this.verifyCode || '999999', // this.verifyCode,
					pid: uni.getStorageSync('pid') || '' //上级ID,分享链接所带 非必填
				});
				initWebSocket(res.data.user.id);
				uni.setStorageSync('token', res.data.token);
				uni.setStorageSync('userInfo', res.data.user);
				this.fetchUserInfo();
				uni.hideLoading();
				uni.showToast({
					title: '操作成功',
					icon: 'success'
				});
			} catch (error) {}
		},
		async fetchUserInfo() {
			try {
				const res = await this.$http.get('/h5/user/me');
				uni.setStorageSync('userInfo', res.data.user);
				this.getAuthInfoData();
				// 跳转到首页
				uni.switchTab({
					url: '/pages/home/index'
				});
			} catch (error) {}
		},
		// 获取认证信息
		async getAuthInfoData() {
			try {
				const data = await this.$http.get('/h5/user/carowner/authInfo');
				let resData = data.data;
				if (resData) {
					uni.setStorageSync('is_auth', true);
				} else {
					uni.setStorageSync('is_auth', false);
				}
			} catch (error) {}
		}
	},

	beforeDestroy() {
		// 清除定时器
		if (this.timer) {
			clearInterval(this.timer);
		}
	}
};
</script>

<style lang="scss" scoped>
.login-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-image: url('~@/static/login-bg.png');
	background-size: 100% 100%;
	// background-position: 50% 50%;
	background-repeat: no-repeat;
	overflow: hidden;
}

.logo {
	display: flex;
	justify-content: center;

	image {
		width: 522rpx;
		height: 522rpx;
	}
}

.form-container {
	margin: 140rpx 70rpx 40rpx 70rpx;

	.title-container {
		margin-bottom: 70rpx;

		.title {
			font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
			font-weight: 700;
			font-size: 36rpx;
			color: #0b1f20;
		}

		.label {
			font-size: 28rpx;
			color: #999999;
		}
	}
}

.form-item {
	margin-bottom: 40rpx;

	.label {
		display: block;
		margin-bottom: 20rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 32rpx;
		color: #0b1f20;
	}
}

.input-wrapper {
	display: flex;
	align-items: center;
	border-bottom: 2rpx solid #eee;
	padding-bottom: 10rpx;
}

.input-wrapper input {
	flex: 1;
	height: 80rpx;
	font-size: 32rpx;
}

.send-code {
	color: #ff7937;
	font-size: 28rpx;
	margin-left: 20rpx;
	white-space: nowrap;
}

.send-code.disabled {
	color: #999;
}

.login-btn {
	margin-top: 60rpx;
	background-color: #ff7937;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 45rpx;
	font-size: 32rpx;
}

.login-btn[disabled] {
	background-color: #ccc;
}

.agreement {
	font-size: 24rpx;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20rpx;

	.check-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 14rpx;
	}

	.agreement-text {
		color: #ff7937;
	}
}
</style>
